<template>
  <!-- <div class="content-box">
  <common-header :title="title"></common-header>-->
  <div class="page-content">
    <van-skeleton title :row="3" v-if="show" />
    <div class="block" v-else>
      <h1>投资合同书</h1>
      <p class="bh">合同编号:{{hdNo}}</p>
      <!--*号要随机数字字母  本来想用js写随机的但是没办法每次打开会变，这需要你处理就是随机了之后不变 -->
      <p>甲方：{{providerName}}</p>
      <!--后台系统设置下的站点信息新增一个叫合同公司-->
      <p class="name">乙方：{{consumeName}}</p>
      <!--身份证名字 -->
      <p>甲乙双方经友好协商，本着互利互惠、真诚合作的原则，根据《中华人民共和国合同法》等有关法律、法规，就项目投资相关事宜，经友好协商，达成如下合同条款，以资双方共同遵守。</p>
      <h2>第一条:乙方投资项目</h2>
      <table class="jdb_user_table" border="0" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th>项目类别</th>
            <th>投入金额</th>
            <th>分红周期</th>
            <th>分红时长</th>
            <th>分红次数</th>
            <th>周期分红金额</th>
            <th>总计收入(含本金)</th>
          </tr>
        </thead>
        <tbody>
          <tr class="jdb_user_tr">
            <td class="type">{{type}}</td>
            <!--还有另外三种 2.按日复利付收益，到期还本   3.按一次性付收益，到期还本  4.按实时付收益，到期还本-->
            <td class="amount">{{price}}元</td>
            <!--用户投入的金额-->
            <td class="time">{{durations}}</td>
            <!--用户购买时间到项目结束时间-->
            <td class="day">{{days}} 个自然日</td>
            <!--有效时长-->
            <td class="num">{{profitnNum}} 次</td>
            <!--返利次数 -->
            <td class="shoyi">{{profitnAmount}} 元</td>
            <!--用户该项目预计收益金额 -->
            <td class="count">{{sumAmount}} 元</td>
            <!--用户该项目预计收益金额加上本金 -->
          </tr>
        </tbody>
      </table>
      <h2>第二条：投资、分红及亏损</h2>
      <p>
        1、乙方投入
        <span class="amount">{{price}}元</span>整购买甲方投资项目产品，投资项目：
        <span class="title_name">{{shopName}}</span>。
      </p>
      <!--投资金额要调用 -->
      <p>
        2、甲方应当在每个分红周期届满之日起
        <span class="st">{{start_time}}</span>日内按照本合同约定分红额度将本周期分红足额支付至乙方。
      </p>
      <!--用户购买时间要调用 -->
      <p>
        3、本合同约定的分红周期届满之日
        <span class="end">{{end_time}}</span>，甲方一次性将乙方投入本金足额返还给乙方。
      </p>
      <!--项目结束时间要调用 -->
      <p>4、本项目亏损由甲方承担，乙方不承担本项目亏损及风险。</p>
      <h2>第三条：该项目经营管理事项</h2>
      <p>1、该项目由甲方负责全权运营，甲方负责处理该项目运营过程中的一切事务；</p>
      <p>2、该项目独立核算，与甲方其他业务收支分离；</p>
      <p>3、未经甲方另行书面授权，乙方不得以任何理由、任何形式干预该项目运营，不得以任何理由、任何形式干涉甲方独立管理该项目事宜。</p>
      <h2>第四条：禁止行为</h2>
      <p>1、乙方不得从事损害甲方及该项目利益的活动，否则甲方有权终止该协议，收回乙方分红权并不予支付乙方任何投资款、补偿款；</p>
      <p>2、未经甲乙双方协商一致并签订书面协议，乙方不得向任何第三方转让、出售、赠与该项目分红权利。</p>
      <h2>第五条：撤资</h2>
      <p>本合同签订后，乙方不得以任何理由、任何形式向甲方提出撤资。如向甲方提出撤资的，本协议解除，甲方收回分红权，并不予向乙方退还任何投资款及补偿，甲乙双方权利义务终止。</p>
      <h2>第六条、不可抗力</h2>
      <p>1、如该项目在运营过程中，因战争、地震或政府禁令等不可抗力原因导致该项目无法继续运营的，甲乙双方投资关系解除，甲方无息退还乙方投资款，双方互不负违约责任。</p>
      <h2>第七条、违约责任</h2>
      <p>如甲方未依照合同约定向乙方支付分红款或在投资期满未按时返还乙方投入的本金，逾期按照月利息百分之二向乙方加付违约金。如逾期三个周期仍未支付违约金，乙方可起诉甲方，要求甲方一次性返还本金、分红款并支付违约金。</p>
      <h2>第八条、纠纷的解决</h2>
      <p>凡因履行本合同所发生的争议，甲乙双方应友好协商解决，如协商不成，任何一方有权向甲方所在地人民法院起诉。</p>
      <h2>第九条、其他</h2>
      <p>1、本合同自双方签章且乙方实缴投资款之日起生效。</p>
      <p>2、本合同一式三份，甲乙丙各执一份，具有同等法律效力。</p>
      <p>3、本合同以在线方式签订的，电子件视为合同原件。</p>
      <p>【以下无正文】</p>
      <h3>
        <p>甲方：{{providerName}}</p>
        <!--后台系统设置下的站点信息新增一个叫合同公司-->
        <p>
          签约日期：
          <span class="st">{{start_time}}</span>
        </p>
        <!--用户购买时间要调用 -->
        <canvas id="canvas" width="250" height="250"></canvas>
        <!--<img src="/uploads/4d/599c5d27c6dea42749b3e80c081b10.png"  id="canvas">-->
      </h3>
      <h4>
        <p>
          <span class="name">乙方：{{consumeName}}</span>
        </p>
        <!--用户认证的名字 -->
        <!--<p>身份证号码：<span class="code"></span></p>-->
        <!--用户身份证 -->
        <p>
          签约日期：
          <span class="st">{{start_time}}</span>
        </p>
        <!--用户购买时间要调用 -->
      </h4>
      <h5>
        <p>丙方：{{guara}}</p>
        <!--后台系统设置下的站点信息新增一个叫合同公司-->
        <p>
          签约日期：
          <span class="st">{{start_time}}</span>
        </p>
        <!--用户购买时间要调用 -->
        <canvas id="canvas2" width="250" height="250"></canvas>
        <!--<img src="/uploads/4d/599c5d27c6dea42749b3e80c081b10.png"  id="canvas">-->
      </h5>
    </div>
  </div>
  <!-- </div> -->
</template>
<script>
import { commonHeader } from "common";
import createSeal from "@/utils/seal";
import { orderPact } from "@/api/user";
export default {
  name: "contract",
  components: { commonHeader },
  data() {
    return {
      title: "合同详情",
      hdNo: "",
      hd: "",
      shopName: "",
      type: "",
      price: "",
      durations: "",
      start_time: "",
      end_time: "",
      days: 0,
      profitnNum: 0,
      profitnAmount: "",
      sumAmount: "",
      providerName: "",
      guara:"",
      consumeName: "",
      show: false
    };
  },
  mounted() {
    orderPact({
      hd: this.$route.query.hd
    }).then(res => {
      this.hdNo = res.data.hd;
      this.shopName = res.data.shopName;
      this.type = res.data.type;
      this.price = res.data.price;
      this.durations = res.data.durations;
      this.start_time = res.data.start_time;
      this.end_time = res.data.end_time;
      this.days = res.data.days;
      this.profitnNum = res.data.profitnNum;
      this.profitnAmount = res.data.profitnAmount;
      this.sumAmount = res.data.sumAmount;
      this.providerName = res.data.provider.name;
      this.consumeName = res.data.consume.name;
      this.guara = res.data.guara
      createSeal("canvas", this.providerName, "合同专用章");
      createSeal("canvas2", this.guara, "合同专用章");
    });
  }
};
</script>
<style lang="less" scoped>
.page-content {
  margin-bottom: 0;
}
.block {
  width: 100%;
  box-sizing: border-box;
  padding: 0.2rem 0.2rem 1.5rem;
  overflow-y: auto;
  background-color: #fff;
  h1 {
    text-align: center;
    font: 600 0.5rem/3 "Microsoft YaHei";
    color: #111;
  }
  h2 {
    font: 600 0.4rem/2 "Microsoft YaHei";
    color: #111;
  }
  p {
    font-size: 0.35rem;
    color: #444;
    line-height: 1.7;
    margin: 0.3rem 0;
  }
  font-weight: bold;
  h3 {
    width: 60%;
    float: left;
    margin: 0.3rem 0 0.6rem;
    position: relative;
  }
  h4 {
    width: 38%;
    float: right;
    clear: right;
    margin: 0.3rem 0 0.6rem;
  }
  h5 {
    width: 100%;
    margin: 4rem 0 0.6rem;
    position: relative;
    clear: both;
  }
  #canvas,
  #canvas2 {
    transform: scale(0.4);
    position: absolute;
    top: -2.5rem;
    left: -0.75rem;
  }
  table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    font: 0.35rem/1.5 "Microsoft YaHei";
    color: #333;
    background: #fff;
    thead {
      background: #f6f4f5;
    }
    td,
    th {
      min-width: 0.2rem;
      border: 1px #ddd solid;
      max-width: 5rem;
      padding: 0.2rem 0;
      word-wrap: break-word;
      word-break: break-all;
    }
  }
}
</style>